<template>
    <div v-loading="loading">
        <div @click="$router.go(-1)" style="display: flex;align-items: center;cursor: pointer;margin-bottom: 20px;">
            <i class="el-icon-arrow-left" style="font-size: 20px;color: #409eff;"></i>
             <div style="color: #409eff;">返回</div>
        </div>
        <template>
            <el-descriptions :column="3" border class="margin-top" title="密聊详情">
                <el-descriptions-item>
                    <template slot="label">发单者</template>
                    <!-- <div v-if="datas.user_info_more" style="display: flex;align-items: center;">
                        <el-avatar size="medium" :src="datas.user_info_more.avatar" style="margin-right: 10px;"></el-avatar>
                        {{ datas.user_info_more.name }}
                    </div>-->
                    <UserInfo :user_id="datas.user_id" :userInfos="datas.author" v-if="datas.user_id"></UserInfo>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">ID</template>
                    {{ datas.order_id }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">接单人</template>
                    <UserInfo :user_id="datas.take_id" :userInfos="datas.taker" v-if="datas.take_id"></UserInfo>
                </el-descriptions-item>

                <!-- <el-descriptions-item>
                    <template slot="label">密聊传图</template>
                        <el-image class="border" style="width: 100px; height: 100px" fit="cover" :src="datas.images[0]" :preview-src-list="datas.images">
                          </el-image>
                </el-descriptions-item> -->

                <el-descriptions-item>
                    <template slot="label">订单号</template>
                    {{ datas.trade_no }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">外部订单号(微信、支付宝)</template>
                    {{ datas.out_trade_no }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">套餐下标</template>
                    {{ datas.package_key }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">套餐开始时间</template>
                    {{ datas.start_time }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">套餐结束时间</template>
                    {{ datas.end_time }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">接单上传描述</template>
                    {{ datas.desc }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">金额</template>
                    {{ datas.money }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">支付类型</template>
                    <el-tag type="success" v-if="datas.payment == 'wechat'">微信</el-tag>
                    <el-tag type="success" v-else-if="datas.payment == 'alipay'">支付宝</el-tag>
                    <el-tag type="success" v-else-if="datas.payment == 'balance'">balance</el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">接单类型</template>
                    <el-tag type="success" v-if="datas.type == 'one_by_one'">1v1密聊</el-tag>
                    <el-tag type="success" v-else-if="datas.type == 'same_city'">同城空降</el-tag>
                    <el-tag type="success" v-else-if="datas.type == 'customized'">私人订制</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">商品状态</template>
                    <el-tag type="warning" v-if="datas.status == 0">待付款</el-tag>
                    <el-tag type="success" v-else-if="datas.status == 1">上架</el-tag>
                    <el-tag type="danger" v-else-if="datas.status == 2">下架</el-tag>
                    <el-tag type="danger" v-else-if="datas.status == 3">进行中</el-tag>
                    <el-tag type="success" v-else-if="datas.status == 4">已完成</el-tag>
                    <el-tag type="danger" v-else-if="datas.status == 5">取消</el-tag>
                    <el-tag type="danger" v-else-if="datas.status == 6">拒绝</el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">是否评价过</template>
                    {{ datas.commented == 0 ? '否':'是' }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">手续费</template>
                    {{ datas.fee }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">是否指定用户</template>
                    {{ datas.appoint }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">拨打时长</template>
                    {{ datas.called }}
                </el-descriptions-item>
                
                <!-- <el-descriptions-item>
                    <template slot="label">完成时间</template>
                    {{ datas.finished_at }}
                </el-descriptions-item> -->

                <el-descriptions-item>
                    <template slot="label">添加时间</template>
                    {{ datas.created_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">{{  datas.status == 4 ? '完成时间' : '修改时间' }}</template>
                    {{ datas.updated_at }}
                </el-descriptions-item>


                <el-descriptions-item>
                    <template slot="label">结束时间</template>
                    {{ datas.finished_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">取消时间</template>
                    {{ datas.cancel_at }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">删除时间</template>
                    {{ datas.deleted_at }}
                </el-descriptions-item>
            </el-descriptions>

        </template>


        <!-- 图片 -->

     
            <div style="margin-top: 30px;margin-bottom:20px;font-weight: 700;">
                发布订单
            </div>
            <el-card style="margin-bottom: 30px;">
                <div class="flexFS">
                    <div v-for="(item, index) in datas.secret.images" :key="index" style="margin-bottom: 30px;margin-right: 30px;">

                        <el-image class="border" style="width: 150px; height: 150px" :src="item" fit="cover"
                            :preview-src-list="datas.images">
                        </el-image>

                    </div>
                  
                </div>
                <el-button type="success" @click="toDetailsFun(datas.secret.secret_id)">查看详情</el-button>
            </el-card>
   

        <div v-if="datas.images">
            <div style="margin-top: 30px;margin-bottom:20px;font-weight: 700;">
                接单上传媒体
            </div>
            <el-card style="margin-bottom: 30px;">
                <div class="flexFS">
                    <div v-for="(item, index) in datas.images" :key="index" style="margin-bottom: 30px;margin-right: 30px;">

                        <el-image class="border" style="width: 150px; height: 150px" :src="item" fit="cover"
                            :preview-src-list="datas.images">
                        </el-image>

                    </div>
                </div>
            </el-card>
        </div>





    </div>
</template>
      
<script>
export default {
    data() {
        return {
            visible: false,
            loading: false,
            tabdata: [],
            datas: {}

        }
    },
    mounted() {
        
        //this.getworksList()
        if (this.$route.query.id) {
            console.log('this.$route.query.id', this.$route.query.id)
            this.getWithdrawInfo(this.$route.query.id)
        }

    },
    methods: {
        toDetailsFun(id) {
            this.$router.push({ path: "/secret-chat-details/?id=" + id });
        },
        passFun(id, status) {
            let that = this
            this.$request.put('/secret/update_examine', { secret_id: id, verify_status: status }).then((res) => {
                this.$message.success('操作成功')
                that.getWithdrawInfo(id)
            })
        },

        getWithdrawInfo(id) {
            let that = this
            this.$request.get('/secret/order/get/' + id).then((res) => {
                that.tabdata = []
                that.datas = res

                console.log('res', res)
                that.tabdata.push(res)
            })
        },
    },
}
</script>
      
<style lang="scss" scoped>
.el-button--text {
    margin-right: 20px !important;
}

.el-popover {
    width: 250px;
}

.flexFS {
    display: flex;
    justify-content: flex-start;
}
</style>